<template>
	<view class="section">
		<view class='sk-folding-cube' :style="bodyStyle">
		  <view class='sk-cube sk-cube-1' :style="backStyle"></view>
		  <view class='sk-cube sk-cube-2' :style="backStyle"></view>
		  <view class='sk-cube sk-cube-4' :style="backStyle"></view>
		  <view class='sk-cube sk-cube-3' :style="backStyle"></view>
		</view>
	</view>
	
</template>

<script>
	
	export default {
		name: "LoadingBack10",
		props: {
			bacgColor: {
				type: String,
				default: '#3375f6'
			},
			size: {
				type: Number,
				default: 200,
			}
			
		},
		computed: {
			backStyle: function(){
				return {
					'--backgroundColor': this.bacgColor,
				}
			},
			bodyStyle: function(){
				return {
					width: this.size * .85 + 'rpx',
					height: this.size * .85 + 'rpx'
				}
			},
		},
		data(){
			return{
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.section{
		padding: 20rpx;
	}
	.sk-folding-cube {
	  width: 4em;
	  height: 4em;
	  position: relative;
	  margin: auto;
	  -webkit-transform: rotateZ(45deg);
	          transform: rotateZ(45deg);
	}
	.sk-folding-cube .sk-cube {
	  float: left;
	  width: 50%;
	  height: 50%;
	  position: relative;
	  -webkit-transform: scale(1.1);
	          transform: scale(1.1);
	}
	.sk-folding-cube .sk-cube:before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: var(--backgroundColor);
	  -webkit-animation: sk-folding-cube-angle 2.4s infinite linear both;
	          animation: sk-folding-cube-angle 2.4s infinite linear both;
	  -webkit-transform-origin: 100% 100%;
	          transform-origin: 100% 100%;
	}
	.sk-folding-cube .sk-cube-2 {
	  -webkit-transform: scale(1.1) rotateZ(90deg);
	          transform: scale(1.1) rotateZ(90deg);
	}
	.sk-folding-cube .sk-cube-3 {
	  -webkit-transform: scale(1.1) rotateZ(180deg);
	          transform: scale(1.1) rotateZ(180deg);
	}
	.sk-folding-cube .sk-cube-4 {
	  -webkit-transform: scale(1.1) rotateZ(270deg);
	          transform: scale(1.1) rotateZ(270deg);
	}
	.sk-folding-cube .sk-cube-2:before {
	  -webkit-animation-delay: 0.3s;
	          animation-delay: 0.3s;
	}
	.sk-folding-cube .sk-cube-3:before {
	  -webkit-animation-delay: 0.6s;
	          animation-delay: 0.6s;
	}
	.sk-folding-cube .sk-cube-4:before {
	  -webkit-animation-delay: 0.9s;
	          animation-delay: 0.9s;
	}
	
	@-webkit-keyframes sk-folding-cube-angle {
	  0%, 10% {
	    -webkit-transform: perspective(140px) rotateX(-180deg);
	            transform: perspective(140px) rotateX(-180deg);
	    opacity: 0;
	  }
	  25%, 75% {
	    -webkit-transform: perspective(140px) rotateX(0deg);
	            transform: perspective(140px) rotateX(0deg);
	    opacity: 1;
	  }
	  90%, 100% {
	    -webkit-transform: perspective(140px) rotateY(180deg);
	            transform: perspective(140px) rotateY(180deg);
	    opacity: 0;
	  }
	}
	
	@keyframes sk-folding-cube-angle {
	  0%, 10% {
	    -webkit-transform: perspective(140px) rotateX(-180deg);
	            transform: perspective(140px) rotateX(-180deg);
	    opacity: 0;
	  }
	  25%, 75% {
	    -webkit-transform: perspective(140px) rotateX(0deg);
	            transform: perspective(140px) rotateX(0deg);
	    opacity: 1;
	  }
	  90%, 100% {
	    -webkit-transform: perspective(140px) rotateY(180deg);
	            transform: perspective(140px) rotateY(180deg);
	    opacity: 0;
	  }
	}
</style>
